<script setup lang="ts">
import {ref} from 'vue';
import { RouterView, useRouter } from 'vue-router';

// 新增注释20251109

// 新增注释ljx

const buttons = ref([
  '炉子总览', 
  '坯料跟踪', 
  '生产管理', 
  '数学模型', 
  '网络通信', 
  '日志系统', 
  '班组管理', 
  '维护系统'
]); // 按钮内容数组
const activeButtonIndex = ref<number | null>(null); // 当前激活的按钮索引

const pages = ref([
  'Overview',
  'BilletTracking',
  'ProductionManagement',
  'MathModel',
  'NetworkCommunication',
  'LogSystem',
  'TeamManagement',
  'MaintenanceSystem'
])


const router = useRouter();

const handleClick = (index: number) => {
  activeButtonIndex.value = index; // 更新当前激活的按钮索引
  router.push(pages.value[index])
};



</script>

<template>
  <div class="container">
    <div class="header">

    </div>

    <div class="main">
      <div class="leftNav">

        <button v-for="(button, index) in buttons"
          :key="index"
          class="left-button"
          :style="{backgroundColor: activeButtonIndex === index? '#C70019' : '#393e46'}"
          @click="handleClick(index)"
        >
        {{ button }}
      </button>
      </div>
      <div class="rightContent">
        <RouterView/>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
